<template>
  <div>
    <el-cascader
      :options="areaJson"
      change-on-select="true"
      v-model="editCodeName"
      :disabled="disabled"
      @change="handleSelectChange"
      @active-item-change="handleChange"
      ref="myCascader"
      class="wd400">
    </el-cascader>
  </div>
</template>

<script>
export default {
  name: 'sysarea',
  props:{
    editCode:{
      type: Array,
      default: []
    },
     disabled: Boolean
    // myCascader:null,
  },
  data () {
    return {
      editCodeName: [],
      areaJson: [],
      myCascader:null,
    }
  },
  methods:{
    handleSelectChange(item){
      //this.editCodeName = item;
      var map = {};
      map.value = item;
      map.label = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
      this.$emit('childChange',map)
      console.log(this.editCodeName)
    },
    handleChange(item){
      if (item.length == 1){
        this._getCityArea(item)
      }
      if (item.length == 2){
        this._getCountyArea(item)
      }
      if (item.length == 3){
        this._getTownArea(item)
      }
      if (item.length == 4){
        this._getVillageArea(item)
      }

    },
    querySearchAsync(queryString, cb) {
      if(!queryString) {
        this.redactData.code = '';
      }
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    handleSelect(item) {
      this.redactData.code = item.adress;
      this.editCodeName = item.value;
      console.log(this.editCodeName)
    },
    _getArea () {
      this.post('/common/getArea',  {}, (data) => {
              data.data.forEach( (e,i) => {
                var map = {};
                map.value = e.value;
                map.label = e.name;
                map.children = [];
                this.areaJson.push(map)
              })
      },false);
    },
    _getCityArea (code) {
      var para = {
        code: code[0]
      }
      this.areaJson.forEach((e, i) => {
        if (e.value == code[0]) {
          if (!e.children.length) {
            this.post('/common/getCityArea',  para||{}, (data) => {
              var ls = [];
              e.children = data.data.map((value, cli) => {
                return {
                  value: value.value,
                  label: value.name,
                  children:[]
                }
              })
            },false)
          }
        }
      })
    },
    _getCountyArea (code) {
      var para = {
        code:code[1]
      }
      this.areaJson.forEach((e, i) => {
        if (e.value == code[0]) {
          if (e.children.length) {
            e.children.forEach((ce, ei) => {
              if (ce.value == code[1]) {
                if (!ce.children.length) {
                  this.post('/common/getCountyArea',  para||{}, (data) => {
                    //console.log('区域：' + JSON.stringify(data))
                    ce.children= data.data.map((value, cli) => {
                      return {
                        value: value.value,
                        label: value.name,
                        children:[]
                      }
                    })
                  },false)
                }
              }
            })

          }
        }
      })
    },
    _getTownArea (code) {
      var para = {
        code:code[2]
      }
      this.areaJson.forEach((e, i) => {
        if (e.value == code[0]) {
          if (e.children.length) {
            e.children.forEach((ce, ei) => {
              if (ce.value == code[1]) {
                if (ce.children.length) {
                  ce.children.forEach((tce, tei) => {
                    if (tce.value == code[2]) {
                      if (!tce.children.length) {
                        this.post('/common/getTownArea',  para||{}, (data) => {
                          tce.children= data.data.map((value, cli) => {
                            return {
                              value: value.value,
                              label: value.name,
                              children:[]
                            }
                          })
                        },false)
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
    },
    _getVillageArea (code) {
      var para = {
        code:code[3]
      }
      this.areaJson.forEach((e, i) => {
        if (e.value == code[0]) {
          if (e.children.length) {
            e.children.forEach((ce, ei) => {
              if (ce.value == code[1]) {
                if (ce.children.length) {
                  ce.children.forEach((tce, tei) => {
                    if (tce.value == code[2]) {
                      if (tce.children.length) {
                        tce.children.forEach((vtce, tei) => {
                          if (vtce.value == code[3]) {
                            if (!vtce.children.length) {
                              this.post('/common/getVillageArea',  para||{}, (data) => {
                                vtce.children= data.data.map((value, cli) => {
                                  return {
                                    value: value.value,
                                    label: value.name
                                  }
                                })
                              },false)
                            }
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
    },
    // 
    getCode(){
      this.editCodeName=[]
      this.editCode.forEach(el =>{
        this.editCodeName.push(el)
      })
      if(this.editCodeName.length){
        this.post('/common/getArea',  {}, (data) => {
                data.data.forEach( (e,i) => {
                  var map = {};
                  map.value = e.value;
                  map.label = e.name;
                  map.children = [];
                  this.areaJson.push(map)
                })
                if(this.editCodeName.length > 1){
                  this.areaJson.forEach((e, i) => {
                    if (e.value == this.editCodeName[0]) {
                      console.log(e.value)
                      if (!e.children.length) {
                        this.post('/common/getCityArea',  {code: this.editCodeName[0]}, (data) => {
                          var ls = [];
                          e.children = data.data.map((value, cli) => {
                            return {
                              value: value.value,
                              label: value.name,
                              children:[]
                            }
                          })
                          if(this.editCodeName.length > 2){
                            this.areaJson.forEach((e, i) => {
                              if (e.value == this.editCodeName[0]) {
                                if (e.children.length) {
                                  e.children.forEach((ce, ei) => {
                                    if (ce.value == this.editCodeName[1]) {
                                      if (!ce.children.length) {
                                        this.post('/common/getCountyArea',  {code: this.editCodeName[1]}, (data) => {
                                          ce.children= data.data.map((value, cli) => {
                                            return {
                                              value: value.value,
                                              label: value.name,
                                              children:[]
                                            }
                                          })
                                          if(this.editCodeName.length > 3){
                                            this.areaJson.forEach((e, i) => {
                                              if (e.value == this.editCodeName[0]) {
                                                if (e.children.length) {
                                                  e.children.forEach((ce, ei) => {
                                                    if (ce.value == this.editCodeName[1]) {
                                                      if (ce.children.length) {
                                                        ce.children.forEach((tce, tei) => {
                                                          if (tce.value == this.editCodeName[2]) {
                                                            if (!tce.children.length) {
                                                              this.post('/common/getTownArea', {code: this.editCodeName[2]}, (data) => {
                                                                tce.children= data.data.map((value, cli) => {
                                                                  return {
                                                                    value: value.value,
                                                                    label: value.name,
                                                                    children:[]
                                                                  }
                                                                })
                                                                if(this.editCodeName.length > 4){
                                                                  this.areaJson.forEach((e, i) => {
                                                                    if (e.value == this.editCodeName[0]) {
                                                                      if (e.children.length) {
                                                                        e.children.forEach((ce, ei) => {
                                                                          if (ce.value == this.editCodeName[1]) {
                                                                            if (ce.children.length) {
                                                                              ce.children.forEach((tce, tei) => {
                                                                                if (tce.value == this.editCodeName[2]) {
                                                                                  if (tce.children.length) {
                                                                                    tce.children.forEach((vtce, tei) => {
                                                                                      if (vtce.value == this.editCodeName[3]) {
                                                                                        if (!vtce.children.length) {
                                                                                          this.post('/common/getVillageArea', {code: this.editCodeName[3]}, (data) => {
                                                                                            vtce.children= data.data.map((value, cli) => {
                                                                                              return {
                                                                                                value: value.value,
                                                                                                label: value.name
                                                                                              }
                                                                                            })
                                                                                            this.$forceUpdate();
                                                                                          },false)
                                                                                        }
                                                                                      }
                                                                                    })
                                                                                  }
                                                                                }
                                                                              })
                                                                            }
                                                                          }
                                                                        })
                                                                      }
                                                                    }
                                                                  })
                                                                }
                                                              },false)
                                                            }
                                                          }
                                                        })
                                                      }
                                                    }
                                                  })
                                                }
                                              }
                                            })
                                          }
                                        },false)
                                      }
                                    }
                                  })
                                }
                              }
                            })
                          }
                        },false)
                      }
                    }
                  })
                }
        },false);
      }
    }
  },
  watch: {
    editCode(){
      this.getCode();
    }
  },
  created(){
    if(this.editCode.length){
      this.getCode();
    }else{
      this._getArea();
    }
  }
}
</script>

<style scoped>
  .wd400{
    width: 420px;
  }
</style>
